<script setup lang="ts">
import SvgIcon from "@/components/SvgIcon/index.vue";

const $router = useRouter()
const handleSelect = (item) => {
  console.log(item)
  $router.push(item)
}
const activeMenu = ref('/article/content')
</script>

<template>
  <div class="blog-container article-container">
    <div class="left-menu">
      <el-menu
          class="el-menu-vertical-demo"
          @select="handleSelect"
          :default-active="activeMenu"
          active=""
      >
        <el-menu-item index="/article/content">
          <span>内容管理</span>
        </el-menu-item>
        <el-menu-item index="/article/category">
          <span>专栏管理</span>
        </el-menu-item>
        <el-menu-item index="/article/tags">
          <span>标签管理</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="right-content">
      <router-view/>
    </div>
  </div>
</template>

<style scoped lang="scss">
.article-container {
  display: flex;
  padding-top: 16px;
  height: calc(100vh - $blog-nav-height);
}

.el-menu-item {
  height: 42px;
}

.left-menu {
  min-width: 120px;
  .el-menu-vertical-demo {
    height: calc(100vh - $blog-nav-height  - 36px);
  }
}

.right-content {
  padding: 0 16px;
  overflow-y: scroll;
}

</style>
